<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <canvas id="canvas" width="500" height="500" style="border: 1px solid red;">
    	
    </canvas>
    <div id="info">
    	
    </div>
</body>
<script type="text/javascript">
	function drawTree(context){
		//树冠
		x=40;
		y=30;
		
		context.lineWidth = 5;
		context.lineJoin = "round"//接口圆滑 bevel:尖角 miter:斜角
		context.beginPath();
		context.moveTo(0, 0);
		context.lineTo(-x,y);
		context.lineTo(-x/2,y);
		context.lineTo(-x,2*y);
		context.lineTo(-x/2,2*y);
		context.lineTo(-x,3*y);
		context.lineTo(x,3*y);
		//
		context.lineTo(x/2,2*y);
		context.lineTo(x,2*y);
		context.lineTo(x/2,y);
		context.lineTo(x,y);
		
		//context.lineTo(0, 0);
		context.closePath();//闭合路径
		context.stroke();
		
		context.fillStyle = "green";
		context.fill();
		//树干
		context.lineWidth = 2;
		
		
	}
	
	function drawPath(context){
		var canvas = document.getElementById("canvas");
		var context = canvas.getContext("2d");
		context.strokeRect(0,0,300,300);
		context.beginPath();
		context.moveTo(0,0);
		context.quadraticCurveTo(150,-10,150,150);
		context.quadraticCurveTo(160,300,300,0);
		context.lineWidth = 5;
		context.strokeStyle = "yellow";
		context.stroke();
		
	}
	
	function draw(){

		var canvas = document.getElementById("canvas");
		var context = canvas.getContext("2d");
		context.strokeRect(0,0,300,300)
		
		context.save();
		context.translate(50,90)
		
		drawTree(context);
		context.restore();
		
		drawPath(context);
	}
	function jingxiang(){
			var canvas = document.getElementById("canvas");
			if(canvas.getContext){
				var context = canvas.getContext("2d");
				context.strokeRect(30,100,40,180);
				context.stroke();
				
				var lgdt = context.createLinearGradient(30,100,70,100);
				lgdt.addColorStop(0,"#663300");
				lgdt.addColorStop(0.5,"#996600");
				lgdt.addColorStop(1,"#663300");
				context.fillStyle = lgdt;
				context.fillRect(30,100,40,180);
				
				//垂直渐变
				var vlgrd = context.createLinearGradient(30,100,30,280);
				vlgrd.addColorStop(0,'rgba(0,0,0,0.5');
				vlgrd.addColorStop(0.4,'rgba(0,0,0,0.0)');
				context.fillStyle = vlgrd;
				context.fillRect(30,100,40,180);
				
			}
		}
		jingxiang();
	
	window.addEventListener("load",draw,true);
</script>

</html>